<script setup lang="ts">
import type { Config } from '@form-create/designer'
import type { FormRules } from 'element-plus'
import type { SysSettings } from '@/apis/system/sysSettingApi'
import FcDesigner from '@form-create/designer'
import { nextTick, reactive, ref } from 'vue'
import { CommonStates } from '@/apis/common/commonApi'
import { useForm } from '@/composables/useForm'
import 'element-plus/dist/index.css'

const emits = defineEmits(['success'])
const designerRef = ref<InstanceType<typeof FcDesigner>>()
const visible = ref(false)
const dialogTitle = ref('')
const detailData = ref<SysSettings>()
const formSubmit = ref<(data: SysSettings) => Promise<any>>()

const designerConfig = ref<Config>({
  fieldReadonly: false,
  showStyleForm: false,
})

async function open(title: string, data: SysSettings, submit: (data: SysSettings) => Promise<any>) {
  detailData.value = data
  dialogTitle.value = title
  formSubmit.value = submit
  visible.value = true
  nextTick(() => {
    if (data.settingsSchema) {
      designerRef.value?.setRule(JSON.parse(data.settingsSchema))
    }
  })
}

const { formRef, formLoading, submitForm } = useForm(async () => {
  if (detailData.value && designerRef.value && formSubmit.value) {
    detailData.value.settingsSchema = designerRef.value.getJson()
    const result = await formSubmit.value(detailData.value)
    ElMessage.success(`${dialogTitle.value}成功`)
    emits('success', dialogTitle.value, result)
    visible.value = false
  }
})

const rules = reactive<FormRules<SysSettings>>({
  state: [
    { required: true, message: '请选择状态', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入编码', trigger: 'blur' },
    { min: 2, max: 64, message: '编码长度必须 2～64', trigger: 'blur' },

  ],
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 2, max: 32, message: '名称长度必须 2～32', trigger: 'blur' },
  ],
})

defineExpose({ open })
</script>

<template>
  <el-dialog
    v-if="detailData"
    v-model="visible"
    fullscreen
    destroy-on-close center
    :show-close="false"
    class="sys-settings-dialog"
    body-class="flex flex-col h-full"
    header-class="hidden"
  >
    <div class="flex justify-between py-3">
      <div class="px-2 text-lg text-active">
        {{ dialogTitle }}
      </div>
      <el-form ref="formRef" :model="detailData" :rules="rules" inline :show-message="false">
        <el-form-item label="名称" prop="name">
          <el-input v-model="detailData.name" />
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-input v-model="detailData.code" :disabled="detailData.id !== undefined" />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="detailData.state">
            <el-radio v-for="item in CommonStates" :key="item.value" :label="item.label" :value="item.value" />
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="formLoading" @click="submitForm">
            保存
          </el-button>
          <el-button type="info" @click="visible = false">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <FcDesigner ref="designerRef" class="grow" :config="designerConfig" />
  </el-dialog>
</template>

<style>
.sys-settings-dialog {
  padding: 0px;
}
.sys-settings-dialog .el-form-item {
  margin-bottom: 0px;
}
.sys-settings-dialog .el-form-item--small {
  margin-bottom: 0px;
}
</style>
